<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/popper.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./js/jquery-1.11.3.js"></script>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/register.css">
  <title>Document</title>
  <style></style>
</head>

<body>
  <header>
    <div class="container">
      <h1 class="d-flex align-items-center"><a href="index.html" class="d-block"></a></h1>
    </div>
  </header>

  <!-- 注册内容区域 -->
  <section class="mz-main">
    <div class="container h-100">
      <form action="#" class="mz-register-1">
        <div class="mz-title text-center">
          <a href="#">注册Flyme账号</a>
        </div>
        <div class="mz-tips my-4 px-3">
          <i class="mz-err"></i>
          <span class="mz-tips-info"></span>
          <span class="mz-close"></span>
        </div>
        <div class="mz-input d-flex">
          <a href="#" class="d-inline-block w-25 text-center" id="phoneid">
            <span>+86</span>
            <i class="d-inline-block"></i>
          </a>
          <input type="text" value="" name="uphone" id="uphone" placeholder="手机号码" class="border-0 w-75 pl-3">
          <dl class="d-none">
            <dt>常用</dt>
            <dd><span>中国</span>+86</dd>
            <dd><span>中国台湾</span>+886</dd>
            <dd><span>中国香港</span>+852</dd>
            <dd><span>中国</span>+86</dd>
            <dd><span>中国台湾</span>+886</dd>
            <dd><span>中国香港</span>+852</dd>
            <dd><span>中国</span>+86</dd>
            <dd><span>中国台湾</span>+886</dd>
            <dd><span>中国香港</span>+852</dd>
          </dl>
        </div>
        <div class="mz-server text-left my-3">
          <input type="checkbox" value="0" id="server">
          <label for="server">注册账号即表示您同意并愿意遵守</label>
          <a href="#" class="ml-1">Flyme账号服务协议</a> 、
          <a href="#">法律声明</a> 和
          <a href="#">隐私政策</a>
        </div>
        <div><button type="button" class="w-100 border-0 mz-btn1">立即注册</button></div>
        <div><a href="login.html">登录</a></div>
      </form>
      <!-- 设置密码界面 -->
      <form action="#" class="mz-register-2">
        <div class="mz-title text-center">
          <a href="#">注册Flyme账号</a>
        </div>
        <div class="mz-tips my-4 px-3">
          <i class="mz-err"></i>
          <span class="mz-tips-info"></span>
          <span class="mz-close"></span>
        </div>
        <p class="mz-pwd-info">密码长度为 8-16 位，至少包含字母、数字和符号中的两种类型，且不可与账号相同</p>
        <div class="mz-input">
          <input type="text" value="" name="upwd" id="upwd" placeholder="密码" class="border-0 w-75 pl-3">
          <i class="mz-pwd-icon"></i>
        </div>
        <div><button type="button" class="w-100 border-0 mz-btn2">提交</button></div>
      </form>
    </div>
  </section>

  <footer>
    <div class="container">
      <div class="mz-info mt-5 mx-3">
        <ul class="clearfix d-inline-block mz-list">
          <li><a href="#">关于魅族</a></li>
          <li><a href="#">工作机会</a></li>
          <li><a href="#">联系我们</a></li>
          <li><a href="#">法律声明</a></li>
          <li><a href="#">常见问题</a></li>
          <li class="lang">
            <a href="#">简体中文</a>
            <ul>
              <li><a href="#">简体中文</a></li>
              <li><a href="#">English</a></li>
            </ul>
          </li>
        </ul>
        <span class="ml-5">客服热线</span>
        <span class="ml-3">400-788-3333</span>
        <a href="#" class="d-inline-block text-center ml-4">在线客服</a>
        <ul class="mz-icon d-flex justify-content-between">
          <li>
            <a href="#" class="d-block mz-weibo"></a>
          </li>
          <li>
            <a href="#" class="d-block mz-weixin"></a>
          </li>
          <li>
            <a href="#" class="d-block mz-qq"></a>
          </li>
        </ul>
      </div>
      <div class="mz-copyright mt-3 mx-3">
        <span>©2021 Meizu Telecom Equipment Co., Ltd. All rights reserved.</span>
        <a href="#">备案号: 粤ICP备13003602号-4</a>
        <a href="#">经营许可证编号: 粤B2-20130198</a>
        <a href="#">营业执照</a>
      </div>
    </div>
  </footer>

  <script src="./js/register.js"></script>
</body>

</html>